<template>
    <banner2></banner2>
    <div class="industry ">
<!--            <Banner></Banner>-->

        <div class="news" v-for="(item,index) in typeList" :key="index">

            <div style="width: 40%;border: 1px solid red;height: 200px;">

<!--                <div class="title" style="border: 1px solid red;">-->
<!--                    <p>{{item.categoryName}}</p>-->
<!--                    <div class="icon">-->
<!--                        <span><i class="iconfont icon-left"></i></span>-->
<!--                        <span><i class="iconfont icon-right"></i></span>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div style="border: 1px solid green;">-->
<!--                    <IndustryItem v-for="(item1,index1) in item.NewsList" :key="index1" :dataVal="item1"-->
<!--                                  @click.stop="$router.push({path:'/industryDetail',query:{id:item1.id,typeid:item.id}})"-->
<!--                                  style="cursor: pointer">-->
<!--                    </IndustryItem>-->
<!--                </div>-->



            </div>

        </div>

    </div>
</template>
<script>
    import Banner from "../common/banner.vue";
    import banner2 from "../common/banner2";
    import IndustryItem from "./item.vue"
    import {NewsCategoryList, NewsList} from "@/api/new"
    import _ from "lodash"

    export default {
        components: {
            Banner, IndustryItem, banner2
        },
        data() {
            return {
                typeList: []
            }
        },
        created() {
            this.getType()
        },
        methods: {
            getType() {
                NewsCategoryList().then((res) => {
                    this.typeList = res.data.list
                    console.log('类型列表', this.typeList)
                    _.forEach(this.typeList, (v, k) => {
                        this.getList(v.id, k)
                    })
                })
            },
            getList(id, k) {
                NewsList({newscategoryid: id}).then((res) => {
                    console.log(res)
                    this.typeList[k].NewsList = res.data.list
                })
            }
        }
    };
</script>
<style lang="scss" scoped>
    .industry {
        padding-bottom: 30px;
        display: flex;
        width: 40%;
        .news {
            margin-top: 30px;
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #CCCCCC;

                p {
                    font-size: 16px;
                    font-weight: bold;
                    color: #111111;
                    padding-bottom: 10px;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 100%;
                        height: 3px;
                        background: #2eb0c6;
                        position: absolute;
                        bottom: -1px;
                        left: 0;
                    }
                }

                .icon {
                    display: flex;

                    span {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 18px;
                        height: 18px;
                        margin-left: 10px;
                        background: #e5e5e5;
                        border-radius: 2px 0px 0px 0px;
                        cursor: pointer;
                    }

                    i {
                        color: #666666;
                        font-size: 14px;
                    }
                }
            }
        }


    }
    .news{
        display: flex;
        flex-wrap: wrap;
    }
</style>
